<template>
  <div>
    <ul class="address-list">
      <li v-for="(item, index) in list" :key="index">
        <buy-address-item :item="item" :index="index" :nowIndex="nowIndex"
          @choose-item="changeChoose($event)"
          @edit="editAddress($event)"
          @delete-address="showDeleteDialog($event)"></buy-address-item>
      </li>
      <li>
      	<div class="address-add" @click="newOneAddress()">
      		<div class="add-icon"></div>
          <div class="new-addr">{{$tc('message.addAddress', 2)}}</div>
          <div class="address-error-tips" v-if="buyType === 'installment' && list && list.length === 0">{{$t('message.chooseAddrAgain')}}</div>
      	</div>
      </li>
    </ul>
    <v-dialog v-if="isShowDialog === 'delete'">
      <div class="sure">
        <div>{{$t('message.doDelete')}}？</div>
        <div class="btn-group">
          <button class="deleteSure" @click="deleteSure">{{$t('message.yes')}}</button>
          <button class="deleteCancel"  @click="deleteCancel">{{$t('message.no')}}</button>
        </div>
      </div>
    </v-dialog>
    <buy-address-dialog :switch-address="switchAddress" v-if="isShowDialog === 'address'" :content="content" :isNewAdd="isNewAdd" @refresh="getAddressList" @close-dialog="hideAddressDialog"></buy-address-dialog>
  </div>
</template>

<script>
import BuyAddressItem from '@/components/buy/BuyAddressItem'
import VDialog from '@/components/base/VDialog'
import BuyAddressDialog from '@/components/buy/BuyAddressDialog'

export default {
  name: 'BuyAddress',
  components: {
    BuyAddressItem,
    VDialog,
    BuyAddressDialog
  },
  props: {
    // 判断是全额购买还是分期购买 1为全额 2为分期
    switchBuyType: {
      type: [Number, String],
      default: 1
    }
  },
  data () {
    return {
      buyType: this.$route.query.buyType,
      list: [],
      nowIndex: 0,
      isShowDialog: '',
      content: {},
      deleteId: null,
      // 1为新增地址， 2为修改地址
      isNewAdd: 1,
      switchAddress: 1
    }
  },
  methods: {
    // 获取地址信息
    getAddressList () {
      let type = 0
      if (this.buyType === 'installment') {
        type = 2
      } else {
        type = 1
      }
      this.$ajax.addressList(type).then(res => {
        if (res.code === 200) {
          this.list = res.data
          if (this.list.length !== 0) {
            // let index = this.list.findIndex((a) => {
            //   return a.is_default === 1
            // })
            let index = 0
            for (let i in this.list) {
              if (this.list[i].is_default === 1) {
                index = parseInt(i)
              }
            }
            this.nowIndex = index === -1 ? 0 : index
            this.$emit('get-address', this.list[this.nowIndex])
          } else {
            this.$emit('get-address', {})
            this.showDialog('address')
            this.isNewAdd = 1
          }
        } else if (res.code === 201) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.addressGetFail')
          })
        }
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.websideError')
        })
      })
    },
    // 修改选择地址
    changeChoose (index) {
      this.nowIndex = index
      this.$emit('get-address', this.list[this.nowIndex])
    },
    // 显示删除地址弹出框和传递地址ID
    showDeleteDialog (id) {
      this.deleteId = id
      this.showDialog('delete')
    },
    // 显示弹出框
    showDialog (str) {
      this.isShowDialog = str
    },
    // 隐藏弹出框
    hideDialog () {
      this.isShowDialog = ''
    },
    // 隐藏地址弹出框
    hideAddressDialog () {
      this.content = {}
      this.hideDialog()
    },
    newOneAddress () {
      this.showDialog('address')
      this.isNewAdd = 1
    },
    // 弹出修改地址弹出框和传递修改内容
    editAddress (index) {
      this.content = this.list[index]
      this.showDialog('address')
      this.isNewAdd = 2
    },
    // 确认删除地址
    deleteSure () {
      this.$ajax.deleteAddressItem(this.deleteId).then(res => {
        if (res.code === 200) {
          this.deleteId = null
          this.hideDialog()
          this.getAddressList()
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.paramFault')
          })
        }
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.websideError')
        })
      })
    },
    // 取消删除地址
    deleteCancel () {
      this.deleteId = null
      this.hideDialog()
    }
  },
/*  computed: {
    // 获取购买类型: 全额 || 分期
    buyType () {
      return this.$route.query.buyType
    }
  },*/
  watch: {
    switchBuyType (val) {
      if (val === 1) {
        this.buyType = 'full'
        this.switchAddress = 1
      } else {
        this.buyType = 'installment'
        this.switchAddress = 2
      }
      this.getAddressList()
    }
  },
  created () {
    if (this.buyType === 'installment') {
      this.switchAddress = 2
    } else {
      this.switchAddress = 1
    }
    this.getAddressList()
  }
}
</script>

<style scoped>
.address-list {
  overflow: hidden;
}

.address-list li {
	float: left;
  margin-right: 18px;
  margin-bottom: 18px;
}

.address-add {
	width: 222px;
	height: 167px;
  padding: 18px;
	border: 1px solid #d6d6d6;
  cursor: pointer;
}

.add-icon {
  width: 40px;
  height: 40px;
  margin: 48px auto 0;
  background-color: #e7e7e7;
  border-radius: 50%;
  position: relative;
}

.add-icon:before, .add-icon:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: white;
}

.add-icon:before {
  width: 3px;
  height: 16px;
}

.add-icon:after {
  width: 16px;
  height: 3px;
}

.new-addr {
	height: 20px;
	line-height: 20px;
	margin-top: 12px;
  color: #a5a5a5;
  font-size: 14px;
  text-align: center;
}

.sure{
  width: 470px;
  box-sizing: border-box;
  padding: 70px 0 50px;
  font-size: 18px;
  background-color: #fff;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  color:#666;
}
.btn-group{
  margin-top: 60px;
  text-align: center;
  font-size: 0;
}

.btn-group button {
  width: 140px;
  height: 46px;
  cursor: pointer;
}

.btn-group .deleteSure{
  border: 0;
  background: #ff600a;
  color: #fff;
  margin-right: 40px;
}

.btn-group .deleteCancel {
  background-color: #fff;
  border: 1px solid #ff600a;
  color: #ff600a
}

.address-error-tips {
  position: relative;
  color: #ff600a;
  margin-top: 8px;
  padding-left: 24px;
}

.address-error-tips::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: url(../../assets/images/icon_errorTips.png) no-repeat
}
</style>
